<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{border: 1px solid #333;}
		</style>
	</head>
	<body>
		<canvas width="600" height="400"></canvas>
	</body>
	<script type="text/javascript">
		let canvas=document.querySelector("canvas");
		let ctx=canvas.getContext("2d");
		
		let R=200;
		
		ctx.translate(300,200)
		
		
		function staticClock(){
			
		
		//绘制大圆
		ctx.beginPath()
		ctx.arc(0,0,R,0,Math.PI*2,false);
		ctx.lineWidth=6
		ctx.stroke()
		
		// //绘制第1条线
		
		// ctx.save()
		// ctx.rotate(0*6*Math.PI/180)
		// 	ctx.beginPath()
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.lineWidth=2;
		// 	ctx.stroke()
		// ctx.restore()
		
		// //绘制第2条线
		// ctx.beginPath()
		// ctx.save()
		// ctx.rotate(6*1*Math.PI/180)
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.lineWidth=2;
		// 	ctx.stroke()
		// ctx.restore()
		
		// //绘制第3条线
		// ctx.beginPath()
		// ctx.save()
		// ctx.rotate(6*2*Math.PI/180)
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.lineWidth=2;
		// 	ctx.stroke()
		// ctx.restore()
		
		
		// //绘制第3条线
		// ctx.beginPath()
		// ctx.save()
		// ctx.rotate(6*3*Math.PI/180)
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.lineWidth=2;
		// 	ctx.stroke()
		// ctx.restore()
		
		//绘制分针刻度
		function minuteMark(i){
			ctx.beginPath()
			ctx.save()
			ctx.rotate(6*i*Math.PI/180)
				ctx.moveTo(0,0)
				ctx.lineTo(0,-R)
				ctx.lineWidth=2;
				ctx.stroke()
			ctx.restore()
		}
		
		for(let i=0;i<60;i++){
			minuteMark(i)
		}
		
		//绘制白色圆覆盖辐射线
		ctx.beginPath()
		ctx.arc(0,0,R-10,0,Math.PI*2,false)
		ctx.fillStyle="white"
		ctx.fill()
		
		//绘制辐射线
		// ctx.save()
		// ctx.rotate(0*30*Math.PI/180)
		// 	ctx.beginPath()
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.stroke()
		// ctx.restore()
		
		// ctx.save()
		// ctx.rotate(1*30*Math.PI/180)
		// 	ctx.beginPath()
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.stroke()
		// ctx.restore()
		
		// ctx.save()
		// ctx.rotate(2*30*Math.PI/180)
		// 	ctx.beginPath()
		// 	ctx.moveTo(0,0)
		// 	ctx.lineTo(0,-R)
		// 	ctx.stroke()
		// ctx.restore()
		
		//绘制时针刻度
		function markHour(i){
			ctx.save()
			ctx.rotate(i*30*Math.PI/180)
				ctx.beginPath()
				ctx.moveTo(0,0)
				ctx.lineTo(0,-R)
				ctx.stroke()
			ctx.restore()
		}
		
		for(let i=0;i<12;i++){
			markHour(i)
		}
		
		//绘制白色圆，覆盖辐射线
		ctx.beginPath()
		ctx.arc(0,0,R-20,0,Math.PI*2,false);
		ctx.fillStyle="white"
		ctx.fill()
		
		//求值文字的坐标
		let r=R-40;
		
		
		
		// ctx.beginPath()
		// let x0=r*Math.cos(0*Math.PI/180)
		// let y0=r*Math.sin(0*Math.PI/180)
		
		// ctx.textAlign="center";			//水平对齐
		// ctx.textBaseline="middle"		//竖直对齐
		// ctx.font="20px Arial"
		// ctx.fillStyle="#000"
		// ctx.fillText("III",x0,y0)
		
		
		
		// ctx.beginPath()
		// let x1=r*Math.cos(30*Math.PI/180)
		// let y1=r*Math.sin(30*Math.PI/180)

		// ctx.textAlign="center";			//水平对齐
		// ctx.textBaseline="middle"		//竖直对齐
		// ctx.font="20px Arial"
		// ctx.fillStyle="#000"
		// ctx.fillText("IV",x1,y1)
		
		
		// ctx.beginPath()
		// let x2=r*Math.cos(60*Math.PI/180)
		// let y2=r*Math.sin(60*Math.PI/180)
		
		// ctx.textAlign="center";			//水平对齐
		// ctx.textBaseline="middle"		//竖直对齐
		// ctx.font="20px Arial"
		// ctx.fillStyle="#000"
		// ctx.fillText("V",x2,y2)
		
		//绘制文字
		function text(i){
			let arr=["III","IV","V","VI","VII","VIII","IX","X","XI","XII","I","II"]
			ctx.beginPath()
			let x=r*Math.cos(i*30*Math.PI/180)
			let y=r*Math.sin(i*30*Math.PI/180)
			
			ctx.textAlign="center";			//水平对齐
			ctx.textBaseline="middle"		//竖直对齐
			ctx.font="20px Arial"
			ctx.fillStyle="#000"
			ctx.fillText(arr[i],x,y)
		}
		
		// text(2)
		for(let i=0;i<12;i++){
			text(i)
		}
		
		
		//绘制logo
		ctx.beginPath()
		ctx.fillText("Daniel Wellington",0,-80)
	}
	
	
	//绘制红点
	function dot(){
		ctx.beginPath()
		ctx.arc(0,0,5,0,Math.PI*2,false);
		ctx.fillStyle="red";
		ctx.fill()
		
	}
	
	//绘制静止的表盘
	staticClock()
	
	
	//绘制秒针
	function lineSecond(){
		//清除表盘和秒针
		ctx.clearRect(-R,-R,2*R,2*R)
		
		//绘制表盘
		staticClock()
		//绘制新的秒针
		let nowtime=new Date()
		let second=nowtime.getSeconds()
		ctx.save()
		ctx.rotate(second*6*Math.PI/180)
			ctx.beginPath()
			ctx.moveTo(0,40)
			ctx.lineWidth=2;
			ctx.strokeStyle="blue"
			ctx.lineTo(0,-R+30);
			ctx.stroke()
		ctx.restore()
		
		//圆心红点
		// dot()
	}
	
	
	
	
	//绘制分针：每分钟走6度。获取到当前的分钟数，换算成角度进行旋转
	function minuteLine(){
		let minute=new Date().getMinutes()
		ctx.save()
		ctx.rotate(minute*6*Math.PI/180)
			ctx.beginPath()
			ctx.moveTo(0,25)
			ctx.lineTo(0,-R+50)
			ctx.strokeStyle="#000"
			ctx.stroke()
		
		ctx.restore()
		
		// dot()
		
	}
	
	//绘制时针
	function hourLine(){
		let hour=new Date().getHours()
		let minute=new Date().getMinutes()
		
		ctx.save()
		ctx.rotate(hour*30*Math.PI/180+minute*0.5*Math.PI/180)
			ctx.beginPath()
			ctx.moveTo(0,20)
			ctx.lineTo(0,-R+75)
			ctx.stroke()
		
		ctx.restore()
		
		dot()
	}
	
	
	//页面加载，绘制秒针
	lineSecond()
	minuteLine()
	hourLine()
	
	//每一秒，绘制秒针
	setInterval(()=>{
		lineSecond()
		minuteLine()
		hourLine()
		
	},1000)
	
	
	
	
	// setInterval(()=>{
	// 	let minute=new Date().getMinutes()
	// 	ctx.save()
	// 	ctx.rotate(minute*6*Math.PI/180)
	// 		ctx.beginPath()
	// 		ctx.moveTo(0,20)
	// 		ctx.lineTo(0,-R+30)
	// 		ctx.strokeStyle="#000"
	// 		ctx.stroke()
		
	// 	ctx.restore()
	// },1000)
	
	

	
	
	
	
	
	//圆心红点
	dot()
	
	
	
	
	
		

	</script>
</html>